<template>
	<!-- 我的 -->
	<view class="mine-bigbox">
		<!-- 头部蓝色背景 -->
		<view class="m-header-bj" >
			<!-- 用户信息头像等 -->
			<view class="m-header-sz" >
			
				<view class="m-header-user" @tap="gotourl()">
					<!-- 头像 -->
					
					<view class="m-h-tx" >
						<image :src="tximg||'../../static/image/default.png'" ></image>
					</view>

					<!-- 用户昵称 和积分 -->
					<view class="m-h-name">

						<view class="" v-if="userInfo.id">
							<text class="m-h-name-a" >
								{{userInfo.account?userInfo.account:userInfo.phonenumber}}
							</text>
							<view class="m-h-name-b">
								积分{{userInfo.points||0}}
							</view>
						</view>
						<view class="dlzc" v-else>
							登录/注册
						</view>
					</view>
				</view>
				
				<view @tap="goNext('../../pagesD/oneMan/oneMan')" >
					<view class="sz">	</view>
					</view>	
			
			</view>
			<!-- 我的账单订单~~~~~ -->
			<view class="m-xx">
				<view class="m-xx-my" @tap="goZhangdan">
					<view class="m-xx-my-1">我的账单</view>
					<view class="m-xx-my-2">{{userInfo.totalAmount||0}}.00</view>
				</view>
				<view class="m-xx-my">
					<view class="m-xx-my-1">订单</view>
					<view class="m-xx-my-2">1</view>
				</view>
				<view class="m-xx-my">
					<view class="m-xx-my-1">红包</view>
					<view class="m-xx-my-2">{{userInfo.redPackets||0}}</view>
				</view>
				<view class="m-xx-my">
					<view class="m-xx-my-1">券</view>
					<view class="m-xx-my-2">{{userInfo.couponNums||0}}</view>
				</view>

			</view>
			<view class="m-bar">
				<!-- 安全中心 -->
				<view @tap="goNext('../../pagesD/safety/safety')" class="m-bar-a">
					<view class="m-bar-a-img">
						<image class="m-bar-a-img-1" src="../../static/image/bananquanzhongx.png" mode=""></image>
					</view>
					<view class="m-bar-a-text">
						安全中心
					</view>
				</view>
				<!-- 结清证明 -->
				<view class="m-bar-a">
					<view class="m-bar-a-img">
						<image class="m-bar-a-img-1" src="../../static/image/barjieqingzm.png" mode=""></image>
					</view>
					<view class="m-bar-a-text">
						结清证明
					</view>
				</view>
				<!-- 我的合同 -->
				<view class="m-bar-a">
					<view class="m-bar-a-img">
						<image class="m-bar-a-img-1" src="../../static/image/myhetong.png" mode=""></image>
					</view>
					<view class="m-bar-a-text">
						我的合同
					</view>
				</view>
				<!-- 银行卡管理 -->
				<view class="m-bar-a">
					<view class="m-bar-a-img">
						<image class="m-bar-a-img-1" src="../../static/image/yhka.png" mode=""></image>
					</view>
					<view class="m-bar-a-text">
						银行卡管理
					</view>
				</view>
			</view>
			<!-- 结束 -->
		</view>
		<view class="m-header-bjs">

		</view>
		<!-- 下面的列表 -->
		<view class="m-center">
			<!-- 我的资产 -->
			<view class="bigbox m-c-a align-center " v-for="item in title" :key="item.title">
				<view class="m-c-a-img">
					<image :src="item.icon" class="m-c-a-img-1"></image>
					
				</view>
				<view :url="item.url" @tap="goNext(item.url)">
					<view class="m-c-a-text">
						{{item.title}}
					</view>
				</view>
				<!-- 这里是通知数量显示 -->
				<view v-if="item.title=='通知'" class="messBox">
					{{noticeNum}}
				</view>
				<view class="cuIcon-right  fs-32"></view>
			</view>


			<!-- m-center结束 -->
		</view>
		<view class="m-b">
			<text @tap="getdata()">小雨点金融·守护每份好期待</text>
		</view>

	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("users")
	export default {
		data() {
			return {
				tximg: "",
				aaa:"Au99.99",
				title: [{
						"icon": "../../static/image/mybuka.png",
						"title": "我的资产",
						"url": "/pagesC/myAssets/myAssets"
					},
					{
						"icon": "../../static/image/icontongzhi.png",
						"title": "通知",
						"url": "/pagesD/message/message"
					},
					{
						"icon": "../../static/image/icon_dongzhhangjilu.png",
						"title": "动账记录",
						"url": "/pagesD/bill/bill"
					},
					{
						"icon": "../../static/image/icon_mypass.png",
						"title": "密码设置",
						"url": "/pagesD/changePassword/changePassword"
					},
					// {
					// 	"icon": "../../static/image/icon_myjilu.png",
					// 	"title": "记录",
					// 	"url": "../../pagesD/safety/safety"
					// },
					// {
					// 	"icon": "../../static/image/icon_myjilu.png",
					// 	"title": "记录",
					// 	"url": "/pagesC/myAssets/myAssets"
					// },
					{
						"icon": "../../static/image/icon_mykefu.png",
						"title": "客服",
						"url": ""
					},
				],


			}
		},
		computed:{
			...mapState(['userInfo','noticeData']),
			//未读消息数量
			noticeNum(){
				if(this.noticeData){
					const data = this.noticeData.filter(item=>item.status=='0')
					return data.length
				}else{
					return null
				}
			}
		},
		onLoad() {
			// console.log(this.userInfo,'用户信息',uni.getStorageSync('userid'))
			if(uni.getStorageSync('userid')){
					this.getUserInfo()
					this.notice({userId:uni.getStorageSync('userid')})
			}
		},
		
		methods: {
			...mapActions(['getUserInfo','notice']),
			//跳转账单
			goZhangdan(){
				uni.navigateTo({
					"url": "/pagesD/bill/bill"
				})
			},
			goNext(url){
				// console.log(url)
				if(!this.userInfo.id){
					uni.showToast({
						title:'请先登录',
						duration:2000,
						icon:'none'
					})
				}else{
					uni.navigateTo({
						url:url
					})
				}
			},
			settx() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: (res) => {
						// console.log(res.tempFilePaths[0]),
						// 	console.log(this.tximg),
							this.tximg = res.tempFilePaths[0]
					}
				})
			},
			gotourl() {
				if (!this.userInfo.id) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {
					// uni.navigateTo({
					// 	url: "../../pagesD/PIM/PIM"
					// })
				}
			},
			getdata(){
				uni.request({
					url:'http://182.92.101.230:8080/product/gold/all',
					method:"POST",
					success:(res)=>{
						console.log(res)
					},
					fail:(err)=>{
						console.log(err)
					}
					
				})
				
				// uni.request({
				// 	url:'http://182.92.101.230:8080/product/gold/all',
				// 	method:"post"
				// })
				// success:(res)=>{
				// 	console.log(res)
				// }
					// console.log(this.userInfo,'用户信息')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-bigbox {
		background: #F8F7F7;
		width: 750rpx;
		height: 100vh;
		position: relative;
	}

	.m-header-bj {
		width: 750rpx;
		height: 508rpx;
		background: url(../../static/beijing.png);
		background-size: 130%;
		background-repeat: no-repeat;
		background-position: center -120rpx;
	}

	.m-header-sz {
		width: 670rpx;
		height: 160rpx;
		/* background-color: #DD524D; */
		margin-left: 40rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
	}

	.m-header-user {
		width: 600rpx;
		height: 130rpx;
		/* background-color: #4CD964; */
		margin-top: 30rpx;
		display: flex;
	}

	.sz {
		width: 52rpx;
		height: 52rpx;
		/* background-color: #F1F1F1; */
		background-image: url(../../static/image/icon_wode_shezhi.png);
	}

	.m-h-tx {
		width: 130rpx;
		height: 130rpx;
		background-color: #2C405A;
		border-radius: 50%;
		overflow: hidden;
	}

	.m-h-tx image {
		width: 130rpx;
		height: 130rpx;
	}

	.dlzc {
		height: 130rpx;
		line-height: 130rpx;
		color: white;
		font-size: 40rpx;
	}

	.m-h-name {
		margin-left: 18rpx;
	}

	.m-h-name-a {
		height: 60rpx;

		font-size: 32rpx;
		line-height: 70rpx;
	}

	.m-h-name-b {
		background-color: #007AFF;
		height: 60rpx;
		line-height: 34rpx;
		text-align: center;
		font-size: 20rpx;
		color: white;
		width: 106rpx;
		height: 34rpx;
		border: 1rpx solid;
		border-radius: 20rpx;
		padding-left: 14rpx;
		padding-right: 14rpx;
	}

	.m-xx {

		margin-left: 40rpx;
		width: 670rpx;
		height: 120rpx;
		margin-top: 48rpx;
		display: flex;
	}

	.m-xx-my {

		height: 120rpx;
		width: 25%;
		color: white;
		text-align: center;

	}

	.m-xx-my-1 {
		color: white;
		width: 100%;
		height: 44rpx;
		font-size: 32rpx;

		margin-bottom: 26rpx;
	}

	.m-xx-my-2 {
		color: white;
		width: 100%;
		height: 48rpx;
		font-size: 40rpx;
	}

	.m-bar {
		width: 670rpx;
		height: 186rpx;
		margin: 0 auto;
		background-color: red;
		margin-top: 48rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 12rpx;
		display: flex;

		// border: 1rpx solid;
		.m-bar-a {
			width: 167.5rpx;
			height: 186rpx;
			text-align: center;

			.m-bar-a-img {
				width: 88rpx;
				height: 88rpx;
				margin: 0 auto;
				margin-top: 24rpx;
				margin-bottom: 16rpx;
				// border: 1rpx dashed;
				color: #474747;

				.m-bar-a-img-1 {
					width: 88rpx;
					height: 88rpx;
				}
			}

			.m-bar-a-text {
				font-size: 24rpx;
				line-height: 34rpx;
				color: #474747;
			}
		}
	}

	.m-center {
		width: 670rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		background: #FFFFFF;
		// border: 1rpx solid red;
		margin-top: 70rpx;
	}

	.m-c-a {
		width: 670rpx;
		padding: 0 20rpx;
		height: 96rpx;
		// border: 1rpx solid;
		border-bottom: 2rpx solid #EAEDF4;
		display: flex;

	}

	.m-c-a-img {
		width: 48rpx;
		height: 48rpx;
		// margin-top: 24rpx;

		.m-c-a-img-1 {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.m-c-a-text {
		height: 48rpx;
		width: 560rpx;
		line-height: 48rpx;
		color: #474747;
		font-size: 32rpx;
		margin-left: 16rpx;
		// margin-top: 24rpx;
	}

	.m-c-a-img-right {
		// margin-top: 24rpx;
		// width: 40rpx;
		// height: 48rpx;
		// background-color: red;
		// border: 1rpx solid;	
		width: 25rpx;
		height: 25rpx;
		border-top: 2rpx solid #333333;
		border-right: 2rpx solid #333333;
		transform: rotate(45deg);
		margin-right: 30rpx;
	}

	.m-b {
		margin: 0 auto;
		width: 670rpx;
		height: 50rpx;
		font-size: 20rpx;
		color: #989898;
		text-align: center;
		margin-top: 170rpx;
	}
	.bigbox{
		display: flex;
		align-items: center;
		// padding-right: 20rpx;
		position: relative;
	}
	.messBox{
		position: absolute;
		right: 50rpx;
		top: 30rpx;
		height: 40rpx;
		width: 40rpx;
		border-radius: 30rpx;
		border: 1rpx solid #007AFF;
		display: flex;
		justify-content: center;
		align-items: center;}
</style>
